<template>
  <div class="rich-editor">
    <!-- 工具栏 -->
    <div class="editor-toolbar">
      <!-- 撤销/重做 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand('undo')"
            :disabled="!canUndo">
            <span class="material-icons">undo</span>
          </button>
          <div class="tooltip">撤销</div>
        </div>
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand('redo')"
            :disabled="!canRedo">
            <span class="material-icons">redo</span>
          </button>
          <div class="tooltip">重做</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 字体和字号 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <select 
            class="toolbar-select"
            @change="execCommand('fontName', $event.target.value)"
            :value="getCurrentFont()">
            <option value="Arial">Arial</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="微软雅黑">微软雅黑</option>
            <option value="宋体">宋体</option>
            <option value="黑体">黑体</option>
          </select>
          <div class="tooltip">字体</div>
        </div>
        <div class="tooltip-wrapper">
          <select 
            class="toolbar-select"
            @change="execCommand('fontSize', $event.target.value)"
            :value="getCurrentSize()">
            <option value="1">12px</option>
            <option value="2">14px</option>
            <option value="3">16px</option>
            <option value="4">18px</option>
            <option value="5">24px</option>
            <option value="6">32px</option>
            <option value="7">48px</option>
          </select>
          <div class="tooltip">字号</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 文本颜色和背景色 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn color-btn"
            @click="showColorPicker('foreColor')">
            <span class="color-preview" :style="{ backgroundColor: currentTextColor }"></span>
            <span class="material-icons">arrow_drop_down</span>
          </button>
          <div class="tooltip">文字颜色</div>
          <div v-if="showTextColorPicker" class="color-panel">
            <div class="color-grid">
              <div 
                v-for="color in colorList" 
                :key="color"
                class="color-item"
                :style="{ backgroundColor: color }"
                @click="applyColor('foreColor', color)"
              ></div>
            </div>
          </div>
        </div>
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn color-btn"
            @click="showColorPicker('hiliteColor')">
            <span class="color-preview" :style="{ backgroundColor: currentBgColor }"></span>
            <span class="material-icons">arrow_drop_down</span>
          </button>
          <div class="tooltip">背景颜色</div>
          <div v-if="showBgColorPicker" class="color-panel">
            <div class="color-grid">
              <div 
                v-for="color in colorList" 
                :key="color"
                class="color-item"
                :style="{ backgroundColor: color }"
                @click="applyColor('hiliteColor', color)"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 文本格式 -->
      <div class="toolbar-group">
        <div 
          v-for="item in textFormatButtons" 
          :key="item.command"
          class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand(item.command)"
            :class="{ active: isActive(item.command) }">
            <span class="material-icons">{{ item.icon }}</span>
          </button>
          <div class="tooltip">{{ item.title }}</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 标题级别 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <select 
            class="toolbar-select"
            @change="execCommand('formatBlock', $event.target.value)"
            :value="getCurrentBlockFormat()">
            <option value="p">正文</option>
            <option value="h1">标题1</option>
            <option value="h2">标题2</option>
            <option value="h3">标题3</option>
          </select>
          <div class="tooltip">设置文本级别</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 对齐方式 -->
      <div class="toolbar-group">
        <div 
          v-for="item in alignButtons" 
          :key="item.command"
          class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand(item.command)"
            :class="{ active: isActive(item.command) }">
            <span class="material-icons">{{ item.icon }}</span>
          </button>
          <div class="tooltip">{{ item.title }}</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 列表 -->
      <div class="toolbar-group">
        <div 
          v-for="item in listButtons" 
          :key="item.command"
          class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand(item.command)"
            :class="{ active: isActive(item.command) }">
            <span class="material-icons">{{ item.icon }}</span>
          </button>
          <div class="tooltip">{{ item.title }}</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 缩进 -->
      <div class="toolbar-group">
        <div 
          v-for="item in indentButtons" 
          :key="item.command"
          class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand(item.command)"
            :class="{ active: isActive(item.command) }">
            <span class="material-icons">{{ item.icon }}</span>
          </button>
          <div class="tooltip">{{ item.title }}</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 清除格式 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @mousedown.prevent="execCommand('removeFormat')"
            :class="{ active: hasFormat() }">
            <span class="material-icons">format_clear</span>
          </button>
          <div class="tooltip">清除所有格式</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 链接和图片 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @click.prevent="insertLink"
            :class="{ active: isActive('createLink') }">
            <span class="material-icons">link</span>
          </button>
          <div class="tooltip">插入链接</div>
        </div>
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @click.prevent="insertImage">
            <span class="material-icons">image</span>
          </button>
          <div class="tooltip">插入图片</div>
        </div>
      </div>

      <div class="toolbar-divider"></div>

      <!-- 表格 -->
      <div class="toolbar-group">
        <div class="tooltip-wrapper">
          <button 
            class="toolbar-btn"
            @click.prevent="insertTable">
            <span class="material-icons">table_chart</span>
          </button>
          <div class="tooltip">插入表格</div>
        </div>
      </div>
    </div>

    <!-- 编辑区域 -->
    <div 
      class="editor-content" 
      contenteditable="true"
      ref="editorRef"
      @input="handleInput"
      @paste="handlePaste"
      :placeholder="placeholder">
    </div>

    <!-- 链接弹窗 -->
    <div v-if="showLinkDialog" class="dialog-overlay" @click="closeLinkDialog">
      <div class="dialog" @click.stop>
        <h3>插入链接</h3>
        <div class="dialog-content">
          <input 
            type="text" 
            v-model="linkUrl" 
            placeholder="请输入链接地址"
            class="dialog-input"
            ref="linkInput"
            @keyup.enter="confirmLink"
          >
          <input 
            type="text" 
            v-model="linkText" 
            placeholder="链接文本（可选）"
            class="dialog-input"
          >
        </div>
        <div class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeLinkDialog">取消</button>
          <button class="dialog-btn confirm" @click="confirmLink">确定</button>
        </div>
      </div>
    </div>

    <!-- 图片弹窗 -->
    <div v-if="showImageDialog" class="dialog-overlay" @click="closeImageDialog">
      <div class="dialog" @click.stop>
        <h3>插入图片</h3>
        <div class="dialog-content">
          <div class="image-upload">
            <input 
              type="file" 
              accept="image/*" 
              @change="handleImageUpload" 
              ref="imageInput"
              class="image-input"
            >
            <button class="upload-btn" @click="triggerImageUpload">
              <span class="material-icons">cloud_upload</span>
              <span>点击上传图片</span>
            </button>
          </div>
          <div class="divider">或</div>
          <input 
            type="text" 
            v-model="imageUrl" 
            placeholder="输入图片链接"
            class="dialog-input"
            @keyup.enter="confirmImage"
          >
        </div>
        <div class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeImageDialog">取消</button>
          <button class="dialog-btn confirm" @click="confirmImage">确定</button>
        </div>
      </div>
    </div>

    <!-- 表格弹窗 -->
    <div v-if="showTableDialog" class="dialog-overlay" @click="closeTableDialog">
      <div class="dialog" @click.stop>
        <h3>插入表格</h3>
        <div class="dialog-content">
          <div class="table-grid">
            <div 
              v-for="i in 36" 
              :key="i"
              class="grid-cell"
              :class="{ active: isActiveCell(i) }"
              @mouseover="updateTableSize(i)"
              @click="confirmTable"
            ></div>
          </div>
          <div class="table-size">{{ tableRows }} × {{ tableCols }}</div>
        </div>
        <div class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeTableDialog">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, onUnmounted } from 'vue'

/**
 * Step 1: 基础属性定义
 */
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '开始编辑...'
  }
})

const emit = defineEmits(['update:modelValue', 'change'])
const editorRef = ref(null)

/**
 * Step 2: 工具栏按钮配置
 */
const textFormatButtons = [
  { icon: 'format_bold', command: 'bold', title: '粗体' },
  { icon: 'format_italic', command: 'italic', title: '斜体' },
  { icon: 'format_underlined', command: 'underline', title: '下划线' },
  { icon: 'strikethrough_s', command: 'strikeThrough', title: '删除线' },
]

const alignButtons = [
  { icon: 'format_align_left', command: 'justifyLeft', title: '左对齐' },
  { icon: 'format_align_center', command: 'justifyCenter', title: '居中' },
  { icon: 'format_align_right', command: 'justifyRight', title: '右对齐' },
  { icon: 'format_align_justify', command: 'justifyFull', title: '两端对齐' },
]

const listButtons = [
  { icon: 'format_list_bulleted', command: 'insertUnorderedList', title: '无序列表' },
  { icon: 'format_list_numbered', command: 'insertOrderedList', title: '有序列表' },
]

const indentButtons = [
  { icon: 'format_indent_decrease', command: 'outdent', title: '减少缩进' },
  { icon: 'format_indent_increase', command: 'indent', title: '增加缩进' },
]

/**
 * Step 3: 内容处理
 */
const handleInput = () => {
  if (!editorRef.value) return
  const content = editorRef.value.innerHTML
  emit('update:modelValue', content)
  emit('change', {
    html: content,
    text: editorRef.value.textContent
  })
  updateUndoState()
  
  // 更新当前颜色状态
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    const color = document.queryCommandValue('foreColor')
    if (color) {
      const rgb = color.match(/\d+/g)
      if (rgb) {
        currentTextColor.value = rgbToHex(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]))
      }
    }
    
    const bgColor = document.queryCommandValue('hiliteColor')
    if (bgColor && bgColor !== 'transparent') {
      const rgb = bgColor.match(/\d+/g)
      if (rgb) {
        currentBgColor.value = rgbToHex(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]))
      }
    }
  }
}

/**
 * Step 4: 命令处理
 */
const execCommand = (command, value = null) => {
  document.execCommand(command, false, value)
  handleInput()
}

const isActive = (command) => {
  return document.queryCommandState(command)
}

const getCurrentBlockFormat = () => {
  const format = document.queryCommandValue('formatBlock')
  return format ? format.toLowerCase() : 'p'
}

const hasFormat = () => {
  return document.queryCommandState('bold') ||
         document.queryCommandState('italic') ||
         document.queryCommandState('underline') ||
         document.queryCommandState('strikeThrough')
}

const getCurrentFont = () => {
  return document.queryCommandValue('fontName') || 'Arial'
}

const getCurrentSize = () => {
  return document.queryCommandValue('fontSize') || '3'
}

// 链接弹窗
const showLinkDialog = ref(false)
const linkUrl = ref('')
const linkText = ref('')
const linkInput = ref(null)

// 保存当前光标位置
const saveCurrentRange = () => {
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    return selection.getRangeAt(0).cloneRange()
  }
  return null
}

// 恢复光标位置
const restoreRange = (range) => {
  if (range) {
    const selection = window.getSelection()
    selection.removeAllRanges()
    selection.addRange(range)
  }
}

const insertLink = () => {
  const savedRange = saveCurrentRange()
  showLinkDialog.value = true
  nextTick(() => {
    linkInput.value?.focus()
    // 保存选中的文本作为默认链接文本
    if (savedRange && !savedRange.collapsed) {
      linkText.value = savedRange.toString()
    }
    // 保存范围到组件实例
    editorRef.value._savedRange = savedRange
  })
}

const closeLinkDialog = () => {
  showLinkDialog.value = false
  linkUrl.value = ''
  linkText.value = ''
}

const confirmLink = () => {
  if (linkUrl.value) {
    // 恢复之前保存的光标位置
    const savedRange = editorRef.value._savedRange
    if (savedRange) {
      restoreRange(savedRange)
      editorRef.value.focus()
      
      const selection = window.getSelection()
      const range = selection.getRangeAt(0)
      const text = linkText.value || range.toString() || linkUrl.value
      
      const link = document.createElement('a')
      link.href = linkUrl.value
      link.textContent = text
      link.target = '_blank'
      link.rel = 'noopener noreferrer'
      
      range.deleteContents()
      range.insertNode(link)
      
      // 移动光标到链接后面
      range.setStartAfter(link)
      range.setEndAfter(link)
      selection.removeAllRanges()
      selection.addRange(range)
      
      handleInput()
    }
  }
  closeLinkDialog()
}

// 图片弹窗
const showImageDialog = ref(false)
const imageUrl = ref('')
const imageInput = ref(null)

const insertImage = () => {
  const savedRange = saveCurrentRange()
  showImageDialog.value = true
  // 保存范围到组件实例
  editorRef.value._savedRange = savedRange
}

const closeImageDialog = () => {
  showImageDialog.value = false
  imageUrl.value = ''
}

const triggerImageUpload = () => {
  imageInput.value?.click()
}

const handleImageUpload = (e) => {
  const file = e.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      imageUrl.value = e.target.result
      confirmImage()
    }
    reader.readAsDataURL(file)
  }
}

const confirmImage = () => {
  if (imageUrl.value) {
    // 恢复之前保存的光标位置
    const savedRange = editorRef.value._savedRange
    if (savedRange) {
      restoreRange(savedRange)
      editorRef.value.focus()
      
      const img = document.createElement('img')
      img.src = imageUrl.value
      img.alt = '图片'
      
      const selection = window.getSelection()
      const range = selection.getRangeAt(0)
      range.deleteContents()
      range.insertNode(img)
      
      // 移动光标到图片后面
      range.setStartAfter(img)
      range.setEndAfter(img)
      selection.removeAllRanges()
      selection.addRange(range)
      
      handleInput()
    }
  }
  closeImageDialog()
}

// 表格弹窗
const showTableDialog = ref(false)
const tableRows = ref(1)
const tableCols = ref(1)

const insertTable = () => {
  const savedRange = saveCurrentRange()
  showTableDialog.value = true
  // 保存范围到组件实例
  editorRef.value._savedRange = savedRange
}

const closeTableDialog = () => {
  showTableDialog.value = false
  tableRows.value = 1
  tableCols.value = 1
}

const updateTableSize = (index) => {
  const row = Math.ceil(index / 6)
  const col = index % 6 || 6
  tableRows.value = row
  tableCols.value = col
}

const isActiveCell = (index) => {
  const row = Math.ceil(index / 6)
  const col = index % 6 || 6
  return row <= tableRows.value && col <= tableCols.value
}

const confirmTable = () => {
  // 恢复之前保存的光标位置
  const savedRange = editorRef.value._savedRange
  if (savedRange) {
    restoreRange(savedRange)
    editorRef.value.focus()
    
    const table = document.createElement('table')
    table.style.borderCollapse = 'collapse'
    table.style.width = '100%'
    table.style.margin = '10px 0'
    
    for (let i = 0; i < tableRows.value; i++) {
      const tr = document.createElement('tr')
      for (let j = 0; j < tableCols.value; j++) {
        const td = document.createElement('td')
        td.style.border = '1px solid #ddd'
        td.style.padding = '8px'
        td.style.minWidth = '50px'
        td.innerHTML = '&nbsp;'
        tr.appendChild(td)
      }
      table.appendChild(tr)
    }
    
    const selection = window.getSelection()
    const range = selection.getRangeAt(0)
    range.deleteContents()
    range.insertNode(table)
    
    // 移动光标到表格后面
    range.setStartAfter(table)
    range.setEndAfter(table)
    selection.removeAllRanges()
    selection.addRange(range)
    
    handleInput()
  }
  closeTableDialog()
}

const handlePaste = (e) => {
  e.preventDefault()
  // 获取剪贴板数据
  const text = e.clipboardData.getData('text/plain')
  // 插入纯文本
  document.execCommand('insertText', false, text)
}

// 撤销/重做状态
const canUndo = ref(false)
const canRedo = ref(false)

// 颜色选择器状态
const showTextColorPicker = ref(false)
const showBgColorPicker = ref(false)
const currentTextColor = ref('#000000')
const currentBgColor = ref('#ffffff')
const savedRange = ref(null)

// 预定义颜色列表
const colorList = [
  '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff',
  '#ff0000', '#ff4d00', '#ff9900', '#ffcc00', '#ffff00', '#b8cc00', '#73e600', '#00ff00',
  '#00ff80', '#00ffff', '#0080ff', '#0000ff', '#4c0099', '#9900ff', '#ff00ff', '#ff0080',
  '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#cfe2f3', '#d9d2e9', '#ead1dc',
]

// 更新撤销/重做状态
const updateUndoState = () => {
  canUndo.value = document.queryCommandEnabled('undo')
  canRedo.value = document.queryCommandEnabled('redo')
}

// 显示颜色选择器
const showColorPicker = (type) => {
  // 保存当前选区
  const selection = window.getSelection()
  if (selection.rangeCount > 0) {
    savedRange.value = selection.getRangeAt(0).cloneRange()
  }

  if (type === 'foreColor') {
    // 获取当前文字颜色
    const color = document.queryCommandValue('foreColor')
    if (color) {
      // 将 rgb 转换为 hex
      const rgb = color.match(/\d+/g)
      if (rgb) {
        currentTextColor.value = rgbToHex(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]))
      }
    }
    showTextColorPicker.value = !showTextColorPicker.value
    showBgColorPicker.value = false
  } else {
    // 获取当前背景色
    const color = document.queryCommandValue('hiliteColor')
    if (color && color !== 'transparent') {
      const rgb = color.match(/\d+/g)
      if (rgb) {
        currentBgColor.value = rgbToHex(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]))
      }
    }
    showBgColorPicker.value = !showBgColorPicker.value
    showTextColorPicker.value = false
  }
}

// RGB 转 HEX
const rgbToHex = (r, g, b) => {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16)
    return hex.length === 1 ? '0' + hex : hex
  }).join('')
}

// 应用颜色
const applyColor = (type, color) => {
  // 恢复之前保存的选区
  if (savedRange.value) {
    const selection = window.getSelection()
    selection.removeAllRanges()
    selection.addRange(savedRange.value)
  }

  // 如果没有选中文本，则选中光标所在的单词
  const selection = window.getSelection()
  if (selection.isCollapsed) {
    const range = selection.getRangeAt(0)
    const node = range.startContainer
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent
      const offset = range.startOffset
      
      // 找到单词的开始和结束
      let start = offset
      let end = offset
      
      while (start > 0 && !/\s/.test(text[start - 1])) {
        start--
      }
      while (end < text.length && !/\s/.test(text[end])) {
        end++
      }
      
      // 选中整个单词
      range.setStart(node, start)
      range.setEnd(node, end)
      selection.removeAllRanges()
      selection.addRange(range)
    }
  }

  // 应用颜色
  editorRef.value?.focus()
  document.execCommand(type, false, color)

  // 更新当前颜色
  if (type === 'foreColor') {
    currentTextColor.value = color
    showTextColorPicker.value = false
  } else {
    currentBgColor.value = color
    showBgColorPicker.value = false
  }

  // 触发内容更新
  handleInput()
}

// 点击其他地方关闭颜色选择器
const closeColorPickers = (e) => {
  if (!e.target.closest('.color-btn') && !e.target.closest('.color-panel')) {
    showTextColorPicker.value = false
    showBgColorPicker.value = false
  }
}

onMounted(() => {
  if (props.modelValue) {
    editorRef.value.innerHTML = props.modelValue
  }
  document.addEventListener('click', closeColorPickers)
  updateUndoState()
})

onUnmounted(() => {
  document.removeEventListener('click', closeColorPickers)
})
</script>

<style scoped>
.rich-editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  height: 1006px;
  display: flex;
  flex-direction: column;
}

.editor-toolbar {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.toolbar-group {
  display: flex;
  gap: 4px;
  padding: 0 4px;
}

.toolbar-divider {
  width: 1px;
  height: 24px;
  background: #ddd;
  margin: 0 4px;
}

.tooltip-wrapper {
  position: relative;
}

.toolbar-btn {
  padding: 6px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}

.toolbar-btn.active {
  background: #e6e6e6;
  border-color: #999;
  color: #333;
}

.toolbar-select {
  padding: 6px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  min-width: 100px;
  outline: none;
}

.toolbar-select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  pointer-events: none;
  margin-bottom: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.editor-content {
  min-height: 0;
  padding: 12px;
  outline: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
}

.editor-content:empty:before {
  content: attr(placeholder);
  color: #999;
}

.material-icons {
  font-size: 20px;
  line-height: 1;
}

.color-picker {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}

/* 表格样式 */
.editor-content table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  table-layout: fixed;
}

.editor-content td {
  border: 1px solid #ddd;
  padding: 8px;
  min-width: 50px;
  word-break: break-word;
}

/* 链接样式 */
.editor-content a {
  color: #4f46e5;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
  background-color: rgba(79, 70, 229, 0.1);
}

.editor-content a:hover {
  text-decoration: underline;
  background-color: rgba(79, 70, 229, 0.15);
}

/* 图片样式 */
.editor-content img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dialog h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #333;
}

.dialog-content {
  margin-bottom: 20px;
}

.dialog-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 14px;
}

.dialog-input:focus {
  border-color: #4f46e5;
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-btn {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.dialog-btn.cancel {
  background: #f3f4f6;
  color: #666;
}

.dialog-btn.cancel:hover {
  background: #e5e7eb;
}

.dialog-btn.confirm {
  background: #4f46e5;
  color: white;
}

.dialog-btn.confirm:hover {
  background: #4338ca;
}

/* 图片上传样式 */
.image-upload {
  margin-bottom: 15px;
}

.image-input {
  display: none;
}

.upload-btn {
  width: 100%;
  padding: 20px;
  border: 2px dashed #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  transition: all 0.2s;
}

.upload-btn:hover {
  border-color: #4f46e5;
  background: #f5f5f5;
}

.divider {
  text-align: center;
  color: #666;
  margin: 15px 0;
  position: relative;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #ddd;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

/* 表格网格样式 */
.table-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: #f3f4f6;
  padding: 2px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.grid-cell {
  aspect-ratio: 1;
  background: white;
  border: 1px solid #ddd;
  transition: all 0.1s;
}

.grid-cell.active {
  background: #4f46e5;
  border-color: #4f46e5;
}

.table-size {
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* 修改协作者列表样式 */
.collaborators {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

/* 自定义滚动条样式 */
.collaborators::-webkit-scrollbar {
  width: 6px;
}

.collaborators::-webkit-scrollbar-track {
  background: transparent;
}

.collaborators::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.collaborators::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
}

/* 编辑器内容区域样式优化 */
.editor-content {
  min-height: 0;
  padding: 12px;
  outline: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
}

/* 表格样式优化 */
.editor-content table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  table-layout: fixed;
}

.editor-content td {
  border: 1px solid #ddd;
  padding: 8px;
  min-width: 50px;
  word-break: break-word;
}

/* 链接样式优化 */
.editor-content a {
  color: #4f46e5;
  text-decoration: none;
  padding: 0 2px;
  border-radius: 2px;
  background-color: rgba(79, 70, 229, 0.1);
}

.editor-content a:hover {
  text-decoration: underline;
  background-color: rgba(79, 70, 229, 0.15);
}

.toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.color-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 40px;
}

.color-preview {
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 2px;
}

.color-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  width: 200px;
}

.color-item {
  aspect-ratio: 1;
  border: 1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.1s;
}

.color-item:hover {
  transform: scale(1.1);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
</style>